React for Creating User Interfaces
A Complete Beginner’s Guide to React!
Have you visited any websites lately? The answer is probably yes!
Then you might have also visited the websites build with react.
React is one of the most popular library for building user interfaces & companies like PayPal, Twitter, Netflix & Airbnb uses this to power their frontend experiences. React is really awesome it will help you build all sizes of applications.
It’s build in 2013 by the Facebook development team to make user interfaces more modular (or reusable) and easier to maintain. According to React’s website, it is used to “Build encapsulated components that manage their own state, then compose them to make complex UIs.”
What you should Know?
Before getting started with react you should must have the knowledge of JavaScript because we’ll be using ES6 Syntax.
Also you should have node.js installed in your machine so that we can install packages using npm.
One of the best resource for learning React is React Official Docs. This is created and maintained by Facebook and it’s Opensource.
The point of using react is not because it’s popular, because it’s fun to use & it’s component architecture makes it easier and faster building amazing projects on the web and even for the native platforms using react native.
React Developer Tools
Now to get ready to work on react projects it’s a good idea to install React Developer Tools extension from chrome web store.
Developer tools are used to debug our project & really understand issues.
Creating a React App
For setting up the react app we need to use npm which is a node package manager. This is how we write in the terminal/bash. Here are the 3 steps of creating and starting a react app.
When you will do npm start you’ll see something like this in your browser.
Now what this create-react-app results into?
Lets look at the answer to this question -
At first lets see package.json file — It holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies. Like this —
Here we have one important thing that is react scripts — where we’ll get all sorts of cool stuffs like webpack, bable, etc. All set of tools are setup in react scripts!
Now lets see index.js —
index.js typically handles your app startup, routing and other functions of your application and does require other modules to add functionality.
In this we can see this strict mode which will give us warnings when we’ll violate any of the best practices in react and inside that, it contains App component whose file in under the src folder and that only we have imported in index.js
Now to render anything in the app, we need to write a lot using React.createElement and it would be tough for us. So now, it’s good time to refactor JSX.
JSX (JavaScript as XML) is a syntactic extension of JS that allows you to write HTML directly within JavaScript, which has a few benefits of making your code more readable and exercising the full power of JavaScript within HTML.
This is not HTML!
Let me show you what I mean ,
Read this post for understanding the difference between HTML & JSX —
- The first and one of the most important differences of JSX as opposed to HTML is that nested JSX must return a single element, which we’ll call a parent element that wraps all other levels of nested elements. Without the wrapper Element JSX will not transpile.
2. Another Important difference is that in JSX you can’t use the word class as an attribute to define any HTML classes, since class is a reserved word in JavaScript, instead use — className
3. Moreover, all HTML attributes, CSS style properties and event references in JSX become camelCase, this way, onclick event becomes onClick, onchange event becomes onChange, style=” text-align: left” becomes style={{ textAlign: “left”}}, etc.
4. Another Important difference is the Closing Tag. In HTML almost all tags have an opening and a closing tag except probably a few. In JSX, however, any element can be written as a self closing tag
5. Comments, to comments out something inside JSX, use syntax {/* */} to wrap around the text that you’d like to comment out.
6. JSX elements not appearing in HTML console (inspect elements) what to do? React uses a Virtual DOM to optimize the rendering process while using the developer tools by default you can inspect only standard DOM. React Developer Tools extension by chrome web store can be used for that.
Also we have more differences which you’ll see as you work with it. These are some basic and common here.
Creating your First React Component
There are two types of React Components — Functional Components and Class Components. For starting as a beginner you should go with functional component and then class components as they are advanced.
So here we have our App.js and lets get rid of everything out here except div with the class name of App. Like this —
Now create your first Component and give it any name and write that here under the return of App functional component. Like this —
These are three components Header, Footer & Main and we have imported them to App Component using some props that means we have given properties to each element.
This code in App.js results into —
We have learnt about Getting Started with React in this video!
For a Detailed Video Tutorial, Watch this series of React in our YouTube Channel — CroCoding
Now, you can practice more React core concepts and practice to gain confidence.
Once you’re confident with React JS, you can move to Full Stack Development such as MERN Stack.
