DEV Community

Cover image for Let's talk with React!
Iftekharul Islam
Iftekharul Islam

Posted on

Let's talk with React!

Hmm! React
React is a JavaScript library for building user interfaces. Don't quarrel about it library or framework.
It is not exactly a “framework”. A framework is a complete solution but react is not a complete solution and you will often need to use more libraries with React to form any solution.

Both frameworks and libraries are code written by someone else that is used to help solve everyone's common problems.
React is also makes our life easier to write a single page application.

React introduced the smart idea of a virtual DOM that can be used to reconcile the actual DOM.
it introduced the smart idea of a virtual DOM that can be used to reconcile the actual DOM.

React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.

you can check the overview of react

Initialization

Create React App is a comfortable environment for learning React and is the best way to start building a new single-page application in React.

The initialization of React is so easy but you’ll need to have Node >= 10.16 and npm >= 5.6 on your machine. To create a project, run:

npx create-react-app my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

If you’re interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen, CodeSandbox, or Stackblitz.

Here are what I consider to be React prerequisites.

Basic knowledge of HTML & CSS.
Familiar with JavaScript and programming.
Basic understanding of the DOM.
Basic knowledge of ES6 syntax and features.
Node.js and npm installed globally.

That's just the beginning you have to go a lot of path with React

I'm giving you a simple example of react code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Enter fullscreen mode Exit fullscreen mode

Components

import React from 'react'

const App = () => {

    return (
      <div>
        <h1>Hello, React!</h1>
      </div>
    )
}


export default App;
Enter fullscreen mode Exit fullscreen mode

you can get the documentation

Got Stuck?
Ask a question, Existing question

You want Community?

There are many online forums for discussion about best practices and application architecture as well as the future of React.
If you have an answerable code-level question, Stack Overflow is usually a better fit.

Each community consists of many thousands of React users.

DEV’s React community
Hashnode’s React community
Reactiflux online chat
Reddit’s React community
Spectrum’s React community

Top comments (0)