In order to get up and running straight away, I want to introduce you to a tool called CodeSandbox. And 1
this is a browser based development environment that was initially created with React element in 2
mind. 3
It takes care of a lot of the grunt work and setup and it makes it easy to install dependencies with 4
NPM support, 5
so every package that we've used previously using NPM install we can use it inside CodeSandbox. 6
It can be embedded into Medium blog posts and web pages, 7
it allows you to build and deploy within the same application and a whole bunch of other things including 8
really good syntax highlighting and linting as well. 9
Throughout this module, we're going to be using CodeSandbox to introduce you to new skills in React. 10
And after you've learnt the skill 11
then we'll practice those skills in a separate sandbox and it's through this skill practice skill practice 12
that you're going to build up and level up your skills in React. 13
And then at some point once you've acquired enough skills, I'm going to introduce you to a part of the 14
final project, 15
the Keeper app that we're going to be building. And we're going to break down the large Keeper app project 16
into several parts so that you'll be able to apply all of the skills that you learned previously 17
to complete each of these parts. And hopefully you're going to find that this process of using CodeSandbox 18
to learn and practice your skills help you learn React that much quicker and establish a solid foundation 19
of knowledge. 20
Now later on when I introduce you to the first part of the Keeper project, I'm also gonna show you how 21
to set up your local environment using Atom or using the VS code to create React apps. But to begin 22
with, I want to start out just using CodeSandbox so that you'll be at to use the same starting project 23
as me in a really really easy way. 24
So throughout this course, I'll be sharing with you these sandboxes, so that ensures that we're working 25
from the same file and it should minimize any headaches around the setup and configuration. In each lesson 26
where I'm explaining a concept through a use of a sandbox, 27
I will be sharing with you a link to that particular sandbox and this is what you'll see when you open 28
up the link in your browser. 29
You'll be able to see the files that are included and a preview of the website as it is, as well as be 30
able to view any of the existing files that I've created. 31
Now if you want to just get started straight away you can just start editing the project. 32
It's already live and working in your browser. But if you want to be a save your work, you can sign in using 33
GitHub and you'll be able to fork or create your own copy of the sandbox so that you can save it under 34
your own account 35
for you to review later on. 36
Now there's four main sections I want to talk about and the first section is this left hand pane here 37
which you can collapse by clicking on these elements over on the left. 38
If any of you have used VS code, this layout will look quite similar because it's heavily inspired by 39
VS code and a lot of the structure looks a bit like that particular application as well. 40
So all of our files are under the explorer tab and you can collapse or uncollapse by clicking on each 41
of these folders to view the files that are inside. 42
Now we've got our dependencies listed here. 43
So for example if you wanted to add MongoDB or Mongoose or any of those dependencies which you've 44
worked with before, 45
it's as simple as adding a dependency and searching for it from NPM. Now in the middle pane is our code 46
editor. 47
And this is where we're gonna be doing most of our work, 48
so for the majority of time, I'll ask you to collapse or reduce the size of all of the other panes so 49
that you can focus on the coding part. 50
And if you want to, you can change your preferences for your sandbox here to change the font size for 51
example. 52
So I tend to prefer a little bit larger. 53
Or you can even change other things such as the theme or the colors. 54
But this is the middle pane and then on the right here we've got a live preview. 55
So that means if you had a say an h1 tag in here that says 'Hello', it's going to automatically refresh this 56
page to show you the most up to date version of your web app without you needing to start or stop your 57
server. 58
It's going to do that for you automatically in the background. And right at the bottom here you've got 59
the console. 60
So this is the same as the Chrome development tool console that we've been using previously and it's 61
just a small version for the website that you are creating. 62
Now if this is too small, you can always pop it out in a new window so that you can see it in its full 63
glory and you can use the Chrome developer tools if you prefer to stick with these tools as well. 64
Now over here there's also a problems tab which is really useful. 65
So it means that if you make some typos or you have some errors, all of your linting errors is going to 66
go into the problems tab 67
so you can review each of them and try to debug your code. 68
Now if you wanted to share your code say in the Q/A or with your friends, it's 69
as simple as clicking on share and just copying the editor URL. As you can see it's pretty simple 70
and it just works. In the next lesson 71
I'm going to introduce you to JSX, which is a core component of React. So head over there and let's 72
get started writing some React code.