React JS Components – FrugalisMinds

14/02/2018


React JS Components:-

Components let you split the UI into independent and reusable pieces of code. Components help to render your UI, rather describes what should exactly appear on the screen. Lets write a simple react component and see how it works?

This is a basic way of writing components, there is an advanced and good way of writing react components as well. We will see that later.Now lets’ see what happens here.

  1. There is a component created named as Welcome
  2. There is another component named as,App inside this Welcome is called multiple times.
  3. React calls the componentWelcome from the componentApp with as{name: 'Welcome'} the props.

The above code is good, but that is not the practice generally followed in applications.Let’s write a cleaner code using ES6.

Project Structure:-

React Components

Let’s Write Our Welcome Component, create a file named Welcome.jsx.

Now let’s write another component App.jsx, create a file named App.jsx:-

Here we are calling our Welcome component multiple times, in react we are allowed to have only one parent tag and multiple child elements can reside inside this.Now we are going to wire up all our components.

Create a file named main.js:-

So we wired up our App component to render in our browser, you can see the difference between writing code in a conventional way and using ES6 way. Now the question is how do you decide what components to be created in your UI? A simple thumb rule is that if your part of UI is used several times make it a reusable component. If there is complex UI sections then also we can break our UI into components.

React JS Setup using Npm Babel and Webpack

React JS – introduction to JSX and Internal Working

قالب وردپرس