DEV Community

Eelco Verbrugge
Eelco Verbrugge

Posted on

3 2

Your first React app

Back in the days I told people I develop back-end AND front-end. Meaning next to PHP I wrote the html/css and a little bit of jquery myself and that was enough.

Now a days a see a lot of frameworks such as Vue.js, AngularJS and ReactJS. Since a back-end developer should know a little bit about front-end, I learned myself javascript so I at leas can understand. Which is totally different then writing it yourself.

Today I've came to a point I told people I actually would like to learn a front-end framework and ReactJS it is! Altough ReactJS is not really a framework (first thing I learned today), it is a library. But I've been told ReactJS is working with components and... it... is... awesome!

So to my future self and hopefully you, I though I'll give it a try and tell you how to create your very first ReactJS app.

Installation

Make sure you have installed Node 14.0.0 and NPM 5.6 or higher

$ sudo apt update
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo bash $ sudo apt -y install nodejs
Enter fullscreen mode Exit fullscreen mode

Verify the version of Node.js installed

$ node  -v
Enter fullscreen mode Exit fullscreen mode

Create project

Create your project and install Create React App

$ npx create-react-app my-first-react-app
Enter fullscreen mode Exit fullscreen mode

Go into your new project

$ cd my-first-react-app
Enter fullscreen mode Exit fullscreen mode

Run it and high five yourself!

$ npm start
Enter fullscreen mode Exit fullscreen mode

This should open a new tab in your browser to http://localhost:3000/

Thats it! Done. Easy peasy lemon squeezy

Try it yourself and create an awesome tic-tac-toe in an hour yourself:
https://reactjs.org/tutorial/tutorial.html

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs