React Website Tutorial – Build a Beginner React JS Project In 20 Minutes


Timmy Walsh , N. Ireland – Extremely misleading – Told them the domain name that I wanted and they said it was included free with the package that I was buying. After signing up, I went to register the domain name and found out it costs extra because it was ‘.co.uk’ and they didn’t offer this domain name for free. They clearly told me when signing up that the exact domain name I wanted was included for free with the package but it actually costed extra. Got a full refund, but was a total waste of time and very misleading.


Here is the source code:

https://github.com/Tom0901/ReactWebsite2/tree/master/src

The files you want to pay attention to are: App.js, index.html and everything in the components folder. They are all in the src folder apart from index.html which is in the public folder.

Prerequisites:

Node Js: https://nodejs.org/en/
Git: https://git-scm.com/downloads

Packages

Material UI Core: https://www.npmjs.com/package/@material-ui/core
Command: npm install @material-ui/core

Material UI Icons: https://www.npmjs.com/package/@material-ui/icons
Command: npm install @material-ui/icons

React Code Snippets:
https://marketplace.visualstudio.com/items?itemName=runningcoder.react-snippets

Fonts and Images

Font: https://fonts.google.com/specimen/Roboto?preview.text_type=custom

Images: https://drive.google.com/drive/folders/1wrLi9nKPqXRTNI7SJ2zblKE-095Paw60

Netflify: https://www.netlify.com/

Colormind: http://colormind.io/

How I learnt React

DISCLOSURE: I may earn a commission when you use one of our coupons/links to make a purchase. It costs the same for you but helps me out.

https://click.linksynergy.com/link?id=GYxmxdIoGsM&offerid=507388.705264&type=2&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Freact-redux%2F

In this video we build a fully responsive React website that would be ideal as a project.

Time Stamps

00:00 – Intro
00:15 Install Node
0:21 Install Git
00:30 Run create-react-app
00:59 Installing Material UI
01:28 Running the local server
01:43 Theming Material UI
03:25 Building the Button
7:43 Building the nav bar
11:54 Building the icon grid
15:14 App.js CSS
17:35 Building the footer
18:50 Pushing to GitHub
19:53 Hosting on Netlify

Code Creative

10 Comments
  • mirko sedda
    Posted at 15:45h, 25 February

    Finally first! Love your content mate! Keep up!

  • Adam Page
    Posted at 15:54h, 25 February

    Amazing! I've just started learning React and was looking for a project to practice what I've learnt so far. Timing couldn't have been better 🚀

  • Pablo Nox
    Posted at 16:13h, 25 February

    Brilliant. I'm still learning JS but will eventually move onto React, so look forward to doing this when I do!

  • Dibyadarshi Das
    Posted at 17:06h, 25 February

    Awesome video man

  • Sohail Shams
    Posted at 20:00h, 25 February

    Simple project but a lot to learn. Well done Tom.

  • MIkey
    Posted at 02:06h, 27 February

    Decent content 💪🏼 I reckon you’ll like my friends channel too He’s a gun nut and his content is really good. Check him out ——> #CherryCityGunsandAmmo 🪖🔫🎣

  • Rajeev yash
    Posted at 09:52h, 27 February

    Love from India, You're content help me alot. Keep sharing ❤️😍🤩

  • Rathernot Disclose
    Posted at 20:30h, 27 February

    This seems incredibly contrived compared to just writing html/css. That being said, I guess its good practice before moving onto bigger projects where react would actually make sense.

  • Camila Parada
    Posted at 04:25h, 01 March

    Hey! Do you have a material ui tutorial in plans?

  • Philcob Suzuki
    Posted at 08:50h, 02 March

    Please do full stack app ^^