Introduction
This article intends to provide you with all you need to know to get started with React. Here, you will understand the power of a front-end framework, and the concepts needed to assist you to begin building scalable applications with React.
What is React
React is a JavaScript library for building user interfaces.
It is popular for being declarative, efficient, and flexible. It lets you build complex user interfaces from small, isolated code called components.
Why React
The 2022 Stack Overflow Developer Survey shows React to be one of the most effective and popular web frontend frameworks.
This is a result of the following React features:
Declarative: React allows you to define the final state of your desired user interface.
Component reusability: React allows you, as a developer, to create components only once and reuse them throughout your application. This reduces code duplication and shortens the development process guaranteeing uniformity across the entire application.
SEO friendly: React has a positive impact on SEO (Search Engine Optimization) since it creates SPAs (Single Page Applications) that need JavaScript to display content so that it gets rendered.
Open-source support: due to its popularity, React is well supported and maintained by the open-source community.
Design flexibility: React is not opinionated, so it won't compel you to adhere to any particular design patterns, project organizational framework, or logical reasoning. Everything of it is up to you.
Smaller learning curve: Compared to other Frontend libraries and frameworks, React is easier to learn, especially when familiar with JavaScript and HTML fundamentals.
Getting started
To get started with React, you need to understand one of the major pillars of React, Components.
Components
React makes use of reusable components in building its applications. A simple React application is divided into several independent and reusable pieces.
React provides two types of components:
- Function components: Components defined using JavaScript functions
function App() {
return <div className="App">Hello World!</div>;
}
- Class components: Components defined using JavaScript classes
class App extends Component {
constructor() {
super()
}
render() {
return (
<div className="App">
Hello World!
</div>
)
}
}
Read this article for more about React Components
Now, let's get to a more practical approach to learning React.
Installation
create-react-app
is the official way to create single-page applications with React.
To create a React application,
- Run the command below on a terminal.
npx create-react-app my-first-react-app
The above signifies that the application has been created successfully under the directory my-first-react-app
- Navigate into the applications directory using the command below.
cd my-first-react-app
The directory looks like this:
Let's discuss each folder in detail:
node_modules: This folder contains all installed dependencies and packages the React application needs. In essence, the packages you wish to import into your application are stored here.
-
public: This folder contains a variety of files but the major ones to consider are the
index.html
and themanifest.json
files. Here,- the
index.html
file serves as a template for generating the main file which gets rendered on the browser. - the
manifest.json
file contains metadata which determines the icons, names and branding colours to use when a user adds the applications to their home screen.
- the
Visit this web app manifest guide to get a better understanding of how this file affects the user experience.
-
src: This folder serves as the heart of the application's interface, containing all major components and styles created to run the application. It includes major components like:
-
index.js
, which serves as the entry point to the React application. It contains some syntax including the<App>
component as a React element and the DOM element,root
, as the supplied container. Thisroot
DOM element is referenced from theindex.html
. -
App.js
which serves as the root component of the application. A typical React application structure would be to build React components and use thisApp
component as a host to render them to the browser.
-
package.json This file includes a list of the packages your project can use and the versions of those packages on which it depends. Together with the package-lock.json, it makes your build repeatable and simpler to share with other developers.
Run The Application
To run your application
- Ensure you are in the application's directory in your terminal
That is
C:\users\...\my-first-react-app>
Run the command
npm start
Open the
http://localhost:3000
local server to view the application.
Congratulations! You have created your first React application.
Conclusion
This article has given you a rundown of the React frontend web library and its basic setup and structure. Now get creative and begin creating applications with React.
Visit the React Documentation to get more tutorials and content on React
Top comments (2)
Nice one man
Thanks man