Hey,guys! Welcome to another week of my blogs! In this blog, I will be introducing you to React. What is React? React is the most popular front-end Javascript library for building user interfaces.If you want to bring more value to the table when applying for jobs having react on your resume is very important. But, first let's get you all set up then we can talk about components.
Getting started. Create React App is a way to create a single-page application. First, we must set up our environment by running these commands below in your terminal:
npx create-react-app new-app(name of your app)
cd new-app
npm start
This will take a while to complete so be patient..
How it looks successfully:
Last set up step:
Now, that we have gotten you all set up. Let's move on to the next point... Component is a section or part of the user interface. When creating with React we are using independent and isolated components to create complex user interfaces. User interface is what the user sees and interacts with. First, you will start with a root component. The root acts as a container for the whole application and has child components.
In Javascript, the component is a class that will have a state and render method. The state will contain the displayed data when it is rendered. The render method will describe what the user interface will look like. Render has an output method that is a react element that reacts to a DOM element known as a plain object that holds the DOM element in memory. React is straight forward because we do not have to hard code in query by manipulating the DOM or attach event handlers to the DOM elements. This is done by changing the state component allowing React to update the DOM. In other words, React will react to state changes.
Let's build our first component. First, under your src folder create another folder named components. All of your components will be located here. Then create a new file under the same folder and name it followed by .jsx. The jsx extension is better for code completion. Now, let's import the component class from the react module on the second line. Then create a class that will extend from the Component that we imported on the top from the React module. The component class will contained various amounts of methods that we are going to inherit for this class we created.
In this example, we will only have the render method. Inside we will return an jsx expression which will get compiled to calls to React.createElement. Therefore, the react object on line 2 has to be imported regardless if the code will be used or not. Once the class is defined, it will be exported separately on line 10.
Now, in your index.js you must import your First component. Now, we are going to render our First component by extending the html vocabulary so wherever we have the First component we are also getting the output of that component that is determined by what is being returned in the render method. Therefore, in your browser you will see what is being render.
Congrats, you just created your first component. (:
Top comments (0)